<template>

<div class="main sidebar-minified" style="min-height: 962px;" id="root">
		
			<div class="row">
				<div class="col-lg-12">
					<h3 class="page-header"><i class="fa fa-table"></i>Tables</h3>
					<ol class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="index.html">Home</a></li>			  	
						<li><i class="fa fa-table"></i>国内单程航班查询</li>				
					</ol>
				</div>
                    <!-- <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="input1">
                    </el-input>
                    <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        v-model="input2">
                    </el-input> -->
      
			</div>
            <div class="input-group color col-sm-4">
                        <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                        <input type="text" v-model="originalAirstation" class="form-control" id="colorpicker1" value="出发城市">
                        <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                        <input type="text"  v-model="destinationAirStation" class="form-control" id="colorpicker1" value="到达城市" >
                        <!-- <span class="input-group-btn">
                        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"/>
                        </span> -->
                        <span class="input-group-btn">
                        <button type="button" class="btn btn-primary" @click="onClick">Primary</button>
                        </span>
                        
            </div>
			<div class="row">
			
				<div class="col-lg-12">                           
                    <div class="panel panel-default">                                
						<div class="panel-heading">
							<h2><i class="fa fa-table red"></i><span class="break"></span><strong>{{originalAirstation}}到{{destinationAirStation}}</strong></h2>
							<div class="panel-actions">
								<a href="table.html#" class="btn-setting"><i class="fa fa-rotate-right"></i></a>
								<a href="table.html#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a>
								<a href="table.html#" class="btn-close"><i class="fa fa-times"></i></a>
							</div>
						</div>
                                
                        <div class="panel-body">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>
                                            #
                                        </th>
                                        <th>航班号</th>
                                        <th>起飞时间</th>
                                        <th>到达时间</th>
										<th>飞行时间</th>
                                        <th>航空公司</th>
                                        <th>起飞机场</th>
                                        <th>到达机场</th>
                                        <th>航班价格</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="flight in flights" :key="flight.fid">
                                        <td >{{flight.fid}}</td>
                                        <td>{{flight.number}}</td>
                                        <td >{{flight.starttime}}</td>
                                        <td >{{flight.destinationStation}}</td>
                                        <td >{{flight.duration}}</td>
                                        <td >{{flight.number}}</td>
                                        <td >{{flight.originalStation}}</td>
                                        <td >{{flight.destinationStation}}</td>
                                        <td >{{flight.duration}}</td>
                                        <td>
                                            1
                                        </td>
										<td>
											<div class="progress">
												<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
													45%
												</div>
											</div>
										</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>                 
				</div><!--/col-->
			
			</div><!--/row-->
        
		</div>

</template>
<script>
var config = {
    headers: {'Access-Control-Allow-Origin': '*'}
};
export default {
  name: "SinotrucksTable",
  originalAirstation: "北京",
  destinationAirStation: "上海",
  data() {
    return {
      flights:[ 
          {fid: "1",number: "CA1138",original: "南京", destination: "上海",type: "C",flightDatetime: "20211015",starttime: "1350",endtime: "1730",duration:2},
            ],
    };

  },
   methods: {
        onClick() {
            this.flights =null;
            //let api = "/frontend/domainmodel/operatedm?token=dsa90w9e"
            //"/frontend/api/flightretrive/domflighsingleretrive?original=SHANGHAI&destination=BEIJING&flightDate=20211009&token=sd909ewld"
            var api = "/frontend/api/flightretrive/domflighsingleretrive?original=SHANGHAI&destination=BEIJING&flightDate=20211009&token=asi0e0909lksde"
            // var api = "/frontend/domflighsingleretrive?original=SHANGHAI&destination=BEIJING&flightDate=20211009&token=asi0e0909lksde"
            console.log("click");
            
            this.axios.get(api,config).then((response)=>{
                this.flights = response.data;
                console.log(this.flights);
            }
            ).catch(function (error) {
            console.log(error);
            }).then(function () {
                // always executed
            });
        },
    }
}
</script>
